<template>
  <div class="page-container" :style="{background:bgColor}">
      <!-- 顶部导航区域 -->
      <div class="navigation" ref="navigation" :style="{fontSize:titleSize + 'px',color:titleColor}">
          农业数据实时监控系统
      </div>
      <div class="changeTheme" @click="change">主题切换</div>
      <!-- 底部大盒子 -->
      <div class="content">
          <!-- 左侧俩个 -->
          <div class="left-content">
              <div class="left-content-top">
                      <AreaTopPage></AreaTopPage>
              </div>
              <div class="left-content-bottom">
                      
              </div>
          </div>
          <!-- 中间俩个 -->
          <div class="center-content">
              <div class="center-content-top">
                  <AreasProportionPage></AreasProportionPage>
              </div>
              <div class="center-content-bottom">
                  <CropCoveragePage></CropCoveragePage>
              </div>
          </div>
          <!-- 右侧俩个 -->
          <div class="right-content">
              <div class="right-content-top">
                     <GrowthTrendPage></GrowthTrendPage>
              </div>
              <div class="right-content-bottom">

              </div>
          </div>
      </div>

  </div>
</template>

<script>
import AreaTopPage from './AreaTopPage.vue';
import AreasProportionPage from './AreasProportionPage.vue';
import CropCoveragePage from './CropCoveragePage.vue';
import GrowthTrendPage from './GrowthTrendPage.vue';
export default {

  data() {
      return {
        titleSize:0,
        bgColor:'#fff',
        titleColor:'#000',
        isOn:true
      }
  },
  computed: {

  },
  components:{
    AreaTopPage,
    AreasProportionPage,
    CropCoveragePage,
    GrowthTrendPage
  },
  mounted() {
     this.screen()
     window.addEventListener('resize',this.screen)
  },
  methods: {
      screen(){
        this.titleSize = this.$refs.navigation.offsetWidth / 40
      },
      // 切换主题
      change(){
        this.isOn = !this.isOn
        if(this.isOn){
          this.bgColor = '#fff'
          this.titleColor = '#000'
        }else{
          this.bgColor = '#000'
          this.titleColor = '#fff'
        }
        this.$store.commit('change',this.isOn)
      }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  /* background-image: url(../../public/static/img/bgc01.png) */
  /* background-color: #333333; */
}

/* 顶部导航样式 */
.navigation {
  flex: 2;
  width: 100%;
  /* background-color: orange; */
  background-image: url(../../public/img/top02.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  font-weight: 600;
  color: #000;
  text-align: center;
  /* line-height: 3.2rem; */
}

.content {
  flex: 15;
  display: flex;
}

/* 左侧盒子 */
.content .left-content {
  flex: 1;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.content .left-content .left-content-top {
  width: 95%;
  height: 53%;
  border: 1px solid #38C5EC;
}

.content .left-content .left-content-bottom {
  width: 95%;
  height: 42%;
  border: 1px solid #38C5EC;
}

/* 中间盒子 */
.content .center-content {
  flex: 2;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.content .center-content .center-content-top {
  width: 95%;
  height: 22%;
  border: 1px solid #38C5EC;
}

.content .center-content .center-content-bottom {
  width: 95%;
  height: 75%;
  border: 1px solid #38C5EC;
}

/* 右侧盒子 */
.content .right-content {
  flex: 1;
  /* border: 1px solid #38C5EC; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.content .right-content .right-content-top {
  width: 95%;
  height: 48%;
  border: 1px solid #38C5EC;
}

.content .right-content .right-content-bottom {
  width: 95%;
  height: 48%;
  border: 1px solid #38C5EC;
}

/* 主题切换 */
.changeTheme {
  color: #4CD964;
  position: fixed;
  top: 0.625rem;
  right: 1.25rem;
}
</style>